<template>
  <Card v-style="'boxstyle_bg_1'">
    <template #header>
      <div class="header">
        <img src="@/assets/webmasterData/icon6.png" alt="" />
        <span>网站预估流量排名</span>
      </div>
    </template>
    <div class="box">
      <!-- <div class="select">
        <span>所属分类：</span>
        <a-select v-model:value="category" style="width: 40%" @change="categoryChange" />
      </div> -->
      <div id="main" ref="main"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineProps, toRefs } from "vue";
import * as echarts from "echarts";
import Card from "@/components/Card";
import { echartsAutoPlay } from "@/utils/echarts";
const main = ref();
import { bigDataApi } from "@/api/bigData";
import store from "@/store";

let date = 'day';

const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getRankingEstimate();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  // setEcharts();
});
async function getRankingEstimate() {
  const result = await bigDataApi.rankingEstimate({
    date: date,
    token: store.getters.user.token
  });
  const { data } = result;
  console.log(data)
  // 初始化图表
  setEcharts(data);
}
function setEcharts(data) {
  if(data.length > 0){
    var dateList = []
    var minList = []
    var maxList = []
    data.forEach((item,index) => {
      dateList.push(item.date)
      minList.push(item.min)
      maxList.push(item.max)
    });
    var myChart = echarts.init(main.value);
  }
  
  var option = {
    grid: {
      top: "10%",
      left: 0,
      right: "5%",
      bottom: "30",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)",
    },
    legend: {
      bottom: 0,
      textStyle: {
        color: "#C8EAF9",
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#CBD2D5",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      axisTick: {
        show: false,
      },
      data: dateList,
    },
    yAxis: {
      type: "value",
      alignTicks: true,
      axisLabel: {
        textStyle: {
          color: "#CBD2D5",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#222324",
        },
      },
    },
    series: [
      {
        name: "min",
        data: minList,
        type: "line",
        smooth: true,
        itemStyle: {
          barBorderRadius: 20,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#FE5400" },
            { offset: 1, color: "#F0A93E" },
          ]),
        },
      },
      {
        name: "max",
        data: maxList,
        type: "line",
        smooth: true,
        itemStyle: {
          barBorderRadius: 20,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#2CCCFA" },
            { offset: 1, color: "#586BFB" },
          ]),
        },
      },
    ],
  };

  myChart.setOption(option);
  echartsAutoPlay(option, myChart);
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}

.select {
  /deep/ .ant-select {
    color: #fff;
  }
  /deep/ .ant-select-selector {
    background: transparent;
  }
  /deep/.ant-select-arrow {
    color: #fff;
  }
}

.box{
  height: 100%;
  display: flex;
  flex-direction: column;
  #main {
  width: 100%;
  flex:1
}
}
</style>
